<template>
  <div>
    <div class="swiper" ref="swiper">
      <SwiperComponent :items="foodType" :option="option" style="font-size: 18px;padding: 10px 0px;"></SwiperComponent>
    </div>
    <div class="shopList">
      <div style="margin-top: 10px;">
        <span class="iconfont icon-wode" style="color: silver;"></span>
        <span class="nearShop" style="color: silver;margin-bottom: 5px;">附近商家</span>
      </div>
      <shopList :shops="shopList"></shopList>
    </div>
  </div>
</template>
<script>
  import Cookies from "js-cookie";
  import SwiperComponent from "@/components/SwiperComponent.vue";
  import ShopList from "@/components/ShopList.vue"
  export default {
    name: 'main',
    data() {
      return {
        foodType: [],
        option: {
          slidesPerView: 4,
          slidesPerColumn: 2,
          slidesPerColumnFill: 'row',
          loop: false,
          page: true,
          scrollBar: false,
        },
        geohash: [],
        shopList: []
      }
    },
    components: {
      SwiperComponent,
      ShopList,
    },
    created() {
      //修改title
      this.$store.commit("changeTitle", Cookies.get("city_name"));

      // 获取location信息,但不在url中显示
      // console.log(this.$root.location);
      //在cookie中获取经纬度
      Cookies.get("latitude");
      Cookies.get("longitude");
      let latitude = Cookies.get("latitude");
      let longitude = Cookies.get("longitude");

      console.log(latitude, longitude);
      const request1 = this.axios.get("https://elm.cangdu.org/v2/index_entry");
      //https://elm.cangdu.org/shopping/restaurants?latitude=31.22967&longitude=121.4762
      const request2 = this.axios.get("https://elm.cangdu.org/shopping/restaurants?latitude=" + latitude + "&longitude=" + longitude);
      this.axios.all([request1, request2]).then(this.axios.spread((res1, res2) => {
        this.foodType = res1.data;
        this.shopList = res2.data;
        // console.log(this.shopList);
      })).catch(err => console.log(err));

    },
    methods: {
      startNetWork(url,) {
        this.$toast({
          type: 'loading',
          message: '加载中...',
          forbidClick: true,
          closeOnClick: true
        });
        this.axios.get(url).then((res) => {
          console.log(res);
          this.foodType = res.data;
          this.$toast({
            message: '数据加载成功',
            forbidClick: true
          });
        });
      }
    }
  }

</script>
<style lang="less" scoped>
  .swiper {
    margin-bottom: 20px;
  }

  .shopList {
    background-color: white;
  }

  .nearShop {
    font-size: 0.4rem;
    float: left;
    margin-bottom: 0.1rem;
    margin-top: 0.2rem;
  }

  .icon-wode {
    margin-left: 0.4rem;
    font-size: 0.4rem;
    float: left;
    margin-right: 0.2rem;
    margin-top: 0.2rem;
  }
</style>